class MyPage extends BaseList {
    constructor(orderby, flag, $pagesize, $pagination, listUrl, onLineEditUrl, checkBoxName) {
        super(orderby, flag, $pagesize, $pagination, listUrl, onLineEditUrl, checkBoxName);
    }
    OnPageLoad() {
        if (parseInt(this.flag) === 0) {
            // 如果是单选情况，那么隐藏【确定】按钮
            $("#ButOk").remove();
        }
        if (parseInt(this.flag) === 1) {
            // 设置全选框
            let html = '<label class="btn" for="CheckAll" style="margin-left:7px;"><input id="CheckAll" type="checkbox" onclick="_Instance.DoCheckAll($(this));" /><i></i><span></span></label>';
            $("#th-checkall").text('');
            $(html).appendTo($("#th-checkall"));
        }
        this.pagination.attr("_msh_page", 1);

        _InstanceTree.InitTreeObject();
    }
    GetFilter(pageIndex) {
        let item = super.GetFilter(pageIndex);
        // 设置目录条件
        if (parseInt(this.filterCatalogueFlag) === 1) {
            item['CatalogueId'] = parseInt($.trim($('#NodeId').val()) === '' ? 0 : $.trim($('#NodeId').val()));
        }

        item['StyleNo'] = $.trim($('#StyleNoFilterValue').val()) === '' ? null : $.trim($('#StyleNoFilterValue').val());
        item['ProductName'] = $.trim($('#ProductNameFilterValue').val()) === '' ? null : $.trim($('#ProductNameFilterValue').val());
        item['DesignNo'] = $.trim($('#DesignNoFilterValue').val()) === '' ? null : $.trim($('#DesignNoFilterValue').val());
        item['SerialNo'] = $.trim($('#SerialNoFilterValue').val()) === '' ? null : $.trim($('#SerialNoFilterValue').val());
        item['CustomerName'] = $.trim($('#CustomerNameFilterValue').val()) === '' ? null : $.trim($('#CustomerNameFilterValue').val());

        return JSON.stringify(item);
    }
    FetchByFilter() {
        this.filterCatalogueFlag = 0;
        this.FetchForPage(1);
    }
    FetchAll() {
        $("#StyleNoFilterValue").val("");
        $("#ProductNameFilterValue").val("");
        $("#DesignNoFilterValue").val("");
        $("#SerialNoFilterValue").val("");
        $("#CustomerNameFilterValue").val("");

        this.filterCatalogueFlag = 1;
        this.pagination.attr("_msh_page", 1);
        this.FetchForPage(1);
    }
    EmptyTableContent() {
        $("#tabData01 tbody").empty();
        $("#tabData02 tbody").empty();
        this.pagination.attr("_msh_page", 1);
    }
    SetTableContent(result) {
        $("#tabData01 tbody").empty();
        $("#tabData02 tbody").empty();

        let content_01 = '';
        let content_02 = '';
        this.numCheckbox = result.length;  // 设置表格中checkbox的数量为表格的行数
        for (let i = 0; i < result.length; i++) {
            let _productId = result[i].productId;
            content_01 = '<tr _mash_id="' + _productId + '">';
            if (parseInt(this.flag) === 0) { // 单选
                content_01 += '<td style="padding-left:8px; padding-top:0px; vertical-align:baseline;"><label class="btn" for="R-' + _productId + '"><input id="R-' + _productId + '" name="_check_row" type="radio" onclick="_Instance.OnChoice($(this));" value="' + _productId + '"/><i></i><span></span></label></td>';
            } else { // 多选
                content_01 += '<td style="padding-left:9px;"><label class="btn" for="R-' + _productId + '"><input id="R-' + _productId + '" name="_check_row" type="checkbox" onclick="_Instance.DoCheckRow($(this),$(\'#CheckAll\'));" value="' + _productId + '"/><i></i><span></span></label></td>';
            }
            content_01 += '<td>' + formatNullData(result[i].styleNo) + '</td>';
            content_01 += '<td>' + result[i].productName + '</td>';
            content_01 += '</tr>';

            content_02 = '<tr _mash_id="' + _productId + '">';
            content_02 += '<td _mash_settlement_mode_id="' + result[i].settlementModeId + '" _mash_settlement_mode_name="' + result[i].settlementModeName + '">' + formatNullData(result[i].customerName) + '</td>';
            content_02 += '<td>' + formatNullData(result[i].designNo) + '</td>';
            content_02 += '<td>' + formatNullData(result[i].serialNo) + '</td>';
            content_02 += '<td>' + formatNullData(result[i].brand) + '</td>';
            let _issuit = parseInt(result[i].suitFlag) === 0 ? "&nbsp;" : "<span class='c4'></span>";
            content_02 += '<td style="text-align:center;">' + _issuit + '</td>';
            content_02 += '<td style="text-align:center;">' + (result[i].gender === '0' ? '女' : '男') + '</td>';
            content_02 += '<td>' + formatNullData(result[i].productTypeName) + '</td>';
            content_02 += '<td>' + formatNullData(result[i].years) + '</td>';
            content_02 += '<td>' + formatNullData(result[i].seasonName) + '</td>';
            content_02 += '<td style="text-align:center;">' + formatNullData(result[i].uomName) + '</td>';
            content_02 += '<td>' + formatNullData(result[i].pattern) + '</td>';
            content_02 += '<td>' + formatNullData(result[i].barcode) + '</td>';
            content_02 += '<td>' + formatNullData(result[i].costPrice) + '</td>';
            content_02 += '<td>' + formatNullData(result[i].salePrice) + '</td>';
            content_02 += '<td>' + formatNullData(result[i].mainMaterial) + '</td>';
            content_02 += '<td style="border-right: none;">' + formatNullData(result[i].description) + '</td>';
            content_02 += '</tr>';

            $("#tabData01 tbody").append(content_01);
            $("#tabData02 tbody").append(content_02);
            content_01 = '';
            content_02 = '';
        }
        setTwoTableRowColor("tabData01", "tabData02");

        this.ResetSelectRowStatus();  // 恢复选定结果
    }
    // 设置行选择后的状态
    SetRowStatus($self) {
        super.AdjustRowStatus($self, ($row, index) => {
            let key = $self.val();
            let item = {};
            $('#tabData02 tbody tr:eq(' + index + ')').addClass("row__selected");
            let $tr2 = $('#tabData02 tbody tr:eq(' + index + ')');
            // 为翻页选择做准备
            item["productId"] = key;
            item["styleNo"] = $self.parent().parent().parent().find("td").eq(1).text();
            item["customerName"] = $tr2.find("td").eq(0).text();
            item["settlementModeId"] = $tr2.find("td").eq(0).attr("_mash_settlement_mode_id");
            item["settlementModeName"] = $tr2.find("td").eq(0).attr("_mash_settlement_mode_name");
            this.selectedItemList[key] = item;
        }, ($row, index) => {
            let key = $self.val();
            $('#tabData02 tbody tr:eq(' + index + ')').removeClass("row__selected");
            delete this.selectedItemList[key];
        });
    }
    // 每次翻页都恢复选定结果
    ResetSelectRowStatus() {
        let _this = this;
        $("#tabData01 tbody").find("tr").each(function (index) {
            let key = $(this).attr("_mash_id");
            if (_this.selectedItemList[key] !== undefined) {
                $(this).children("td").eq(0).children("label").eq(0).children("input[type='checkbox'][name='_check_row']").eq(0).prop('checked', true);
                $(this).addClass("row__selected");
                $('#tabData02 tbody tr:eq(' + index + ')').addClass("row__selected");
            }
        });
        // 设置选择全部的状态
        let n = $("input[type='checkbox'][name='_check_row']:checked").length;
        if (n < $("#tabData01 tbody").find("tr").length || n === 0) {
            $("#CheckAll").prop("checked", false);
        } else {
            $("#CheckAll").prop("checked", true);
        }
    }
    // 单选动作
    SetChoiceData($self) {
        let $tr1 = $self.parent().parent().parent();
        let $tr2 = $('#tabData02 tbody tr:eq(' + $tr1.index() + ')');
        let _styleNo = $.trim($tr1.find('td').eq(1).text());        // 款号
        let _productName = $.trim($tr1.find('td').eq(2).text());    // 品名
        let _serialNo = $.trim($tr2.find('td').eq(2).text());       // 系列号
        let designNo = $.trim($tr2.find('td').eq(1).text());        // 设计号
        let _customerName = $.trim($tr2.find('td').eq(0).text());   // 客户名称
        let _customerId = $.trim($tr2.find('td').eq(0).attr("CustomerId"));  // 客户ID
        let _typeOfProductName = $.trim($tr2.find('td').eq(6).text());     // 品类
        let _typeOfProductId = $.trim($tr2.find('td').eq(6).attr("ProductCategoryId"));  // 品类ID
        let _settlementModeId = $tr2.find("td").eq(0).attr("_mash_settlement_mode_id");
        let _settlementModeName = $tr2.find("td").eq(0).attr("_mash_settlement_mode_name");

        //设置选择结果
        return new Array($self.val(), _styleNo, _productName, _serialNo, designNo, _customerName,
                _customerId, _typeOfProductName, _typeOfProductId, _settlementModeId, _settlementModeName);
    }
    Expand() {
        let _w = $(window).width();
        let wLeftList = 416;
        $("#btnPanel_01").show();
        $("#treeArea").show();
        $("#panelSplitter").css({left: 250});
        $("#panelSplitter").children().removeClass("fa-angle-double-right").addClass("fa-angle-double-left");
        $("#panelSplitter").attr("title", "折叠目录");

        $("#btnPanel_02").css({left: 275});
        $("#grid__wrapper").css({left: 275, width: _w - 8 - 275});
        $("#divH2").css({left: 0, width: _w - 8 - 275 - wLeftList});
        $("#divD2").css({left: -1, width: _w - 8 - 274 - wLeftList});
    }
    Collapse() {
        let _w = $(window).width();
        let wLeftList = 416;
        $("#btnPanel_01").hide();
        $("#treeArea").hide();
        $("#panelSplitter").css({left: 0});
        $("#panelSplitter").children().removeClass("fa-angle-double-left").addClass("fa-angle-double-right");
        $("#panelSplitter").attr("title", "展开目录");

        $("#btnPanel_02").css({left: 24});
        $("#grid__wrapper").css({width: _w - 24 - 8, left: 24});
        $("#divH2").css({left: 0, width: _w - 8 - 24 - wLeftList});
        $("#divD2").css({left: -1, width: _w - 8 - 23 - wLeftList});
    }
    scrollTo() {
        $('#divH2').scrollLeft($('#divD2').scrollLeft());
        $('#divD1').scrollTop($('#divD2').scrollTop());
    }
}

class MyPageTree extends BaseTree {
    constructor(instance, getTreeUrl, dragUrl, stateKey) {
        super(instance, getTreeUrl, dragUrl, stateKey);
        this.isChoice = 1;
    }
}

let _Instance = null;
let _InstanceTree = null;

//-----------------------------------------------------------------------------
// 页面初始化
//-----------------------------------------------------------------------------
function onPageReady() {
    let flag = jQuery.url.param("flag") === undefined ? 0 : jQuery.url.param("flag");
    _Instance = new MyPage(null, flag, null, $("abbr.page_indicator_block,#wrapper__navbar"),
            "/master/product/fetchForPage.html",
            "",
            "_check_row");
    _InstanceTree = new MyPageTree(_Instance, "/master/product/catalogue/tree.html",
            "/master/product/changeCatalogue.html",
            "product_choice_selected_node");

    //设置分页控制 （操作区域）
    $("#wrapper__navbar").swPagination({
        link_string: '/?page={page_number}',
        max_page: null,
        paged: function (page) {
            $("abbr.page_indicator_block,#wrapper__navbar").attr("_msh_page", page);
            _Instance.FetchForPage(page);
        }
    });
    // 设置表格排序字段
    $("#tabHeader01").wxTableSorter({
        sortList: [[1, 1]], // 第一个表示列的序号，第二个表示排序种类
        headers: {1: {sorter: false}},
        columnList: [[1, "P.StyleNo"]],
        detailList: $("#tabData01"),
        sort: function (orderBy) {
            _Instance.SortTable(orderBy);
        }
    });
    $("#tabHeader02").wxTableSorter({
        sortList: [[0, 1], [1, 1], [2, 1]], // 第一个表示列的序号，第二个表示排序种类
        headers: {0: {sorter: false}, 1: {sorter: false}, 2: {sorter: false}},
        columnList: [[1, "C.CustomerName"], [2, "P.DesignNo"], [2, "P.SerialNo"]],
        detailList: $("#tabData02"),
        sort: function (orderBy) {
            _Instance.SortTable(orderBy);
        }
    });

    $("#panelSplitter").click(function () {
        if ($(this).children("i").hasClass("fa-angle-double-left")) {
            _Instance.Collapse();
        } else {
            _Instance.Expand();
        }
    });

    _Instance.OnPageLoad();
}

// 画面大小或者位置移动
function onPageResize() {
    let h = $(window).height();
    let w = $(window).width();        // 固定宽度
    let wLeftList = 416;              // 左边列表固定宽度

    $("#treeArea").css({height: h - 40});
    if ($("#panelSplitter").children().hasClass("fa-angle-double-left") === true) {
        $("#divH2").css({left: 0, width: w - 8 - 275 - wLeftList});
        $("#divD2").css({left: -1, width: w - 8 - 274 - wLeftList});
    } else {
        $("#divH2").css({left: 0, width: w - 8 - 24 - wLeftList});
        $("#divD2").css({left: -1, width: w - 8 - 23 - wLeftList});
    }
}